<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户中心</title>

<link rel="shortcut icon" href="assets/images/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/user.css">
<link href="plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet">
<link href="plugins/slick/slick.css" rel="stylesheet">
<link href="plugins/slick-nav/slicknav.css" rel="stylesheet">
<link href="plugins/wow/animate.css" rel="stylesheet">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
    <script src="layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>

<body>
	<div id="app">
		<div id="page-loader">
			<div class="loaders">
				<img src="assets/images/loader/3.gif" alt="First Loader"> <img
					src="assets/images/loader/4.gif" alt="First Loader">
			</div>
		</div>
		<header id="site-header">
			<div id="site-header-top">
				<div class="container">
					<div class="row">
						<div class="col-md-5">
							<div class="clearfix">
								<button
									class="btn btn-warning btn-lg header-btn visible-sm pull-right">List
									your Property for Free</button>
								<p class="timing-in-header">Open Hours: Monday to Saturday -
									8am to 6pm</p>
							</div>
						</div>
						<div class="col-md-7">
							<div class="clearfix" v-if="!checkLogin">
								<a class="btn btn-warning btn-lg header-btn hidden-sm"
									href="login.html">点此登录</a>
							</div>
							<div class="clearfix" v-else>
								<a class="btn  btn-lg header-btn" href="javascript:void(0)"
									@Click="out()">退出</a> <a class="btn  btn-lg header-btn"
									href="user.html">个人中心</a> <a
									class="btn btn-warning btn-lg header-btn hidden-sm"
									href="user.html">欢迎：{{user.nickName}}</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row">
					<div class="col-md-3">
						<figure id="site-logo">
							<a href="/room/index.html"><img src="assets/images/logo.png"
								alt="Logo"></a>
						</figure>
					</div>
					<div class="col-md-6 col-sm-8">
						<nav id="site-nav" class="nav navbar-default">
							<ul class="nav navbar-nav">
								<li><a href="/room/index.html">主页</a></li>
								<li><a href="/room/property-listing.html">查询</a></li>
								<li><a href="/room/gallery.html">展示</a></li>
								<li><a href="/room/contact.html">反馈</a></li>
							</ul>
						</nav>
					</div>
					<div class="col-md-3 col-sm-4">
						<div class="contact-in-header clearfix">
							<i class="fa fa-mobile"></i> <span> 联系我们 <br> <strong>111
									222 333 444</strong>
							</span>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- 用户中心界面 -->
		<div class="main_con clearfix">

			<!-- 左侧用户菜单栏 -->
			<div class="left_menu_con fl clearfix">
				<h3>用户中心</h3>
				<ul class="tabs">
					<li class="active"><a href="#info_con">· 个人信息</a></li>
					<li><a href="#room_con">· 我的住房</a></li>
					<li><a href="#order_icon">· 全部订单</a></li>
				</ul>
			</div>

			<!-- 右侧信息展示 -->
			<div class="right_content fr clearfix">
				<!-- 基本信息  -->
				<div class="info_con clearfix info_content" id="info_con">
					<h3 class="common_title2">基本信息</h3>
					<ul class="user_info_list">
						<li>用户名称：<span>{{user.nickName}}</span>
						</li>
						<li>联系方式：<span>{{user.tel}}</span></li>
						<li>联系地址：<span>湖南省衡阳市珠晖区南华大学8教</span></li>
					</ul>

				</div>

				<!-- 查看住房 -->
				<div class="order_icon info_content" id="room_con">
					<div class="addMovie">
						<img alt="" src="img/add.png" onclick="addConfirm()"> <span>添加住房</span>
					</div>
					
					<h3 class="common_title2">全部住房</h3>
					<div v-for="item in rooms">
						<ul class="order_list_th w978 clearfix">
							<li class="col01">{{item.rno}}</li>
							<li class="col02 stress" v-if="item.status == 1">在售</li>
							<li class="col02 stress" v-else-if="item.status == 2">有订单待确认</li>
							<li class="col02 stress" v-else-if="item.status == 3">出租中</li>
							<li class="col02 stress" v-else-if="item.status == 0">已售出</li>
						</ul>

						<table class="order_list_table w980">
							<tbody>
								<tr>
									<td width="30%">
										<ul class="order_room_list clearfix">
											<li class="col01"><img :src="item.pics"></li>
											<li class="col02">{{item.rname}}</li>
											<li class="col03">￥{{item.price}}</li>
										</ul>
									</td>
									
									<td width="15%" v-if="item.status == 1">在售</td>
									<td width="15%" v-else-if="item.status == 2">有订单待确认</td>
									<td width="15%" v-else-if="item.status == 3">出租中</td>
									<td width="15%" v-else-if="item.status == 0">已售出</td>
									<td width="15%" v-else-if="item.status == -1">下架</td>
									
									<td width="15%"><a href="javascript:void(0)"
										class="oper_btn" v-if="item.status == 2"
										@click="checkOrder(item.rno, item.tno, 2)">确认订单</a></td>
									<td width="15%"><a href="javascript:void(0)"
										class="oper_btn" v-if="item.status == 2"
										@click="checkOrder(item.rno, item.tno, 1)">拒绝订单</a></td>
									<td width="15%" ><a href="javascript:void(0)"
										class="oper_btn"  v-if="item.status == 1"
									@click="updateRoomStatus(item.rno, -1)">下架</a></td>
									<td width="15%"> <a href="javascript:void(0)"
										class="oper_btn"  v-if="item.status == -1"
									@click="updateRoomStatus(item.rno, 1)">上架</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- 查看订单 -->
				<div class="order_icon info_content" id="order_icon">
					<h3 class="common_title2">全部订单</h3>
					<div v-for="item in orders">
						<ul class="order_list_th w978 clearfix">
							<li class="col01">{{item.odate}}</li>
							<li class="col02">订单号：{{item.ono}}</li>
							<li class="col02 stress" v-if="item.status == 0">已取消</li>
							<li class="col02 stress" v-else-if="item.status == 1">等待卖家确认</li>
							<li class="col02 stress" v-else-if="item.status == 2">待支付</li>
							<li class="col02 stress" v-else-if="item.status == 3">已完成</li>
							<li class="col02 stress" v-else-if="item.status == 4">入住中</li>
							<li class="col02 stress" v-else-if="item.status == 5">已退租</li>
						</ul>

						<table class="order_list_table w980">
							<tbody>
								<tr>
									<td width="35%">
										<ul class="order_room_list clearfix">
											<li class="col01"><img :src="item.pics"
												style="width: 300px"></li>
											<li class="col02">{{item.rname}}</li>
										</ul>
									</td>
									<td width="15%">总价： ￥{{item.totalPrice}}</td>
									<td width="15%" v-if="item.status==5">待支付:
										￥{{item.rentPrice}}</td>
									<td width="15%" v-if="item.status == 1">等待卖家确认</td>
									<td width="15%" v-else-if="item.status == 2">待支付</td>
									<td width="15%" v-else-if="item.status == 3">已完成</td>
									<td width="15%" v-else-if="item.status == 4">租房中</td>
									<td width="15%" v-else-if="item.status == 0">订单被取消</td>
									<td width="15%" v-if="item.status == 2"><a
										href="javascript:void(0)" class="oper_btn"
										@click="gotoPay(item.ono, item.totalPrice, item.tno, item.rno)">去支付</a></td>
									<td width="15%" v-if="item.status == 4"><a
										href="javascript:void(0)" class="oper_btn"
										@click="outOrder(item.ono,item.price)">退房</a></td>
									<td width="15%" v-if="item.status == 5"><a
										href="javascript:void(0)" class="oper_btn"
										@click="gotoPay(item.ono,item.rentPrice, 0, item.rno)">去结清</a></td>
									<td width="10%" v-if="item.status == 1"><a
										href="javascript:void(0)" class="oper_btn"
										@click="closeOrder(item.ono, item.rno)">取消订单</a></td>
									<td width="10%" v-if="item.status == 2"><a
										href="javascript:void(0)" class="oper_btn"
										@click="closeOrder(item.ono, item.rno)">取消订单</a></td>

								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.migrate.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="plugins/slick-nav/jquery.slicknav.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="plugins/forms/jquery.form.min.js"></script>
<script src="plugins/forms/jquery.validate.min.js"></script>
<script src="plugins/modernizr/modernizr.custom.js"></script>
<script src="plugins/wow/wow.min.js"></script>
<script src="plugins/zoom/zoom.js"></script>
<script src="plugins/mixitup/mixitup.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/showpage.js"></script>
  <script src="./js/coco-message.js"></script>
<script src="js/ajaxfileupload.js"></script>

<script type="text/javascript">
var AddMoviesHtml;
var clientHeight = document.documentElement.clientHeight;
window.onload = function(){
	
    initHtml(); //初始化html
   
}
function initHtml(){AddMoviesHtml =
    "<div class=\"textside\">" +
        "<div class=\"layui-form-item\">" +
            "<label class=\"layui-form-label\">名称</label>" +
            "<div class=\"layui-input-block \">" +
                "<input id=\"rname\" type=\"text\" name=\"rname\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"rname\" class=\"layui-input\">" +
            "</div>" +
        "</div>" +

        "<div class=\"layui-form-item\">" +
            "<label class=\"layui-form-label\">类型</label>" +
            "<div class=\"layui-input-block\">" +
	            "<select name=\"tno\" lay-verify=\"required\" id=\"tno\">" +
					"<option value=\"\">请选择房间类型</option>"+
		    	"</select>"+
            "</div>" +
        "</div>" +        
        
        "<div class=\"layui-form-item temp\">" +
            "<label class=\"layui-form-label\">详情</label>" +
            "<div class=\"layui-input-block \">" +
                "<textarea id=\"descr\" placeholder=\"descr\" class=\"layui-textarea\"></textarea>" +
            "</div>" +
        "</div>" +
        
        "<div class=\"layui-form-item temp\">" +
	        "<label class=\"layui-form-label\">客厅数</label>" +
	        "<div class=\"layui-input-block \">" +
            "<input id=\"meta\" type=\"number\" name=\"meta\">" +
	        "</div>" +
	    "</div>" +
	    "<div class=\"layui-form-item temp\">" +
	        "<label class=\"layui-form-label\">卧室数</label>" +
	        "<div class=\"layui-input-block \">" +
            "<input id=\"bed\" type=\"number\" name=\"bed\" >" +
	        "</div>" +
	    "</div>" +
	    
	    "<div class=\"layui-form-item temp\">" +
	        "<label class=\"layui-form-label\">卫生间</label>" +
	        "<div class=\"layui-input-block \">" +
            "<input id=\"nums\" type=\"number\" name=\"nums\">" +
	        "</div>" +
	    "</div>" +
	    
	    "<div class=\"layui-form-item temp\">" +
	        "<label class=\"layui-form-label\">价格/元</label>" +
	        "<div class=\"layui-input-block \">" +
	        "<input id=\"price\" type=\"number\" name=\"price\">" +
	        "</div>" +
	    "</div>" +
	    "<div class=\"layui-form-item temp\">" +
	        "<label class=\"layui-form-label\">面积/平方米</label>" +
	        "<div class=\"layui-input-block \">" +
	        "<input id=\"area\" type=\"number\" name=\"area\">" +
	        "</div>" +
	    "</div>" +
        "<div class=\"layui-form-item temp\">" +
            "<label class=\"layui-form-label\">地址</label>" +
            "<div class=\"layui-input-block \">" +
            	"<input id=\"address\" type=\"text\" name=\"address\" lay-verify=\"title\" autocomplete=\"off\" class=\"layui-input\">" +
            "</div>" +
        "</div>" +
        	
    "</div>" +
    "<div >" +
        "<div class=\"layui-upload\">" +
            "<p style=\"margin-left:38px\">海报</p>" +
            "<div class=\"layui-upload-list\">" +
                "<img class=\"layui-upload-img\" id=\"demo1\">" +
                "<p id=\"demoText\"></p>" +
            "</div>" +
            "<a href=\"javascript:;\">" +
                "<input type=\"file\" name=\"picss\" id=\"picss\"  style=\"margin-left:38px\">" +
            "</a>" +
        "</div>" +
    "</div>"+
    "<div style=\"margin-top:38px\">" +
	    "<div class=\"layui-upload\">" +
	        "<p style=\"margin-left:38px\">三视图</p>" +
	        "<div class=\"layui-upload-list\" style=\"margin-left:38px\">" +
	            "<img class=\"layui-upload-img\" id=\"demo2\">" +
	            "<p id=\"demoText\" ></p>" +
	        "</div>" +
	        "<a href=\"javascript:;\" >" +
	            "<input type=\"file\" name=\"photos\" id=\"photos\" style=\"margin-left:38px\">" +
	        "</a>" +
	    "</div>" +
	"</div>";
    }
	
    
  //房间添加点击事件
    function addConfirm(){
    	axios.post("type/finds" ).then (rt =>{
	    	if (rt.status == 200){
	    		let str = "";
				$.each(rt.data.data, function(index, item){
					str += "<option value='" + item.tno + "'>" + item.tname + "</option>";
				})
				$("#tno").append($(str));    						
		    	return false;
	    	}
    	})
        var file;
        var formData = new FormData();
        var tempurl;
        //添加房间
            tempurl = "room/add";
            temp = "添加";
            flag = 0;
      
        layui.use(['laypage', 'layer', 'table'], function(){
            var laypage = layui.laypage;
            var layer = layui.layer;
            var table = layui.table
            //房间添加
            layer.open({
                type: 1
                ,title: "添加房间" //不显示标题栏
                ,closeBtn: false
                ,area: ['50%', '90%']
                ,shade: 0.8
                ,offset: clientHeight/20
                ,id: 'LAY_layuipro' //设定一个id,防止重复弹出
                ,btn: ['确认' + temp, '取消']
                ,yes: function(){
                	
                    var rname = $('#rname').val(),                        
                    tno = $('#tno').val(),
                    descr = $('#descr').val(),
                    addr = $('#address').val();
                    bed = $('#bed').val();
                    area= $('#area').val();
                    meta = $('#meta').val();
                    nums = $('#nums').val();
                    price = $('#price').val();
                    if((rname == "") || (tno == "") || (descr == "") ||
                        (descr == "") || (addr == "")|| (bed == "")|| (nums == "")|| (meta == "")){
                        layer.alert(temp + '信息不能存在空,' + temp + '失败！',{icon: 0,offset: clientHeight/5},
                            function (){
                                layer.close(layer.index);
                                
                            }
                        );
                        return false;
                    }
                    //添加
                    if(flag == 0){
                        if(file == null){
                            layer.alert('图片信息不能存在空,' + temp + '失败！',{icon: 0,offset: clientHeight/5},
                                function (){
                                    layer.close(layer.index);
                                }
                            );
                        }else{                         	
                            $.ajaxFileUpload({
                                url : tempurl ,
                                secureurl : false,
                                fileElementId : ['picss', 'photos'],
                                dataType : 'json',
                                data : { 
                       				meta: meta,
                       				nums: nums,
                       				bed: bed,
                                	rname: rname,
                                    tno : tno,
                                    area: area,
                                    descr: descr,
                                    addr :addr,
                                    price: price
                                },
                                success:function (obj) {
                                    
                                    if(obj.code == 200){
                                        layer.alert(temp + '成功！',{icon: 0,offset: clientHeight/5},
                                            function (){
                                                layer.closeAll();
                                                location.reload();
                                            }
                                        );
                                    }else{
                                        layer.alert(temp + '失败！',{icon: 0,offset: clientHeight/5},
                                            function (){
                                                layer.closeAll();
                                            }
                                        );
                                    }
                                }
                            })
                        }
                    } 
                }
                ,btnAlign: 'c movie-last'
                ,moveType: 0 //拖拽模式,0或者1
                ,content: AddMoviesHtml
                ,success: function(layero){
                    //图片上传
                    layui.use('upload', function(){
                        var $ = layui.jquery
                        ,upload = layui.upload;         
                        //普通图片上传
                        var uploadInst = upload.render({
                            elem: '#picss'
                            ,auto: false
                            , choose: function (obj) {
                                //预读本地文件
                                obj.preview(function (index, file, result) {
                                    $('#demo1').attr('src', result); //图片链接（base64）
                                })
                                file = $('#picss')[0].files[0];
                            }
                        });
                        var uploadInst = upload.render({
                            elem: '#photos'
                            ,auto: false
                            , choose: function (obj) {
                                //预读本地文件
                                obj.preview(function (index, file, result) {
                                    $('#demo2').attr('src', result); //图片链接（base64）
                                })
                                file = $('#photos')[0].files[0];
                            }
                        });
                    });
                }
            });
        });
    }
</script>
<script type="text/javascript">

	let rno;
	let app = new Vue({
		el: "#app",
		data: {
			num: 1,
			checkLogin: false,
			user: {},
			orders: [],
			rooms: []
		},
		mounted:function(){
			this.checkUser();
			$("ul.tabs li").click(function() {
				$("ul.tabs li").removeClass("active");
				$(this).addClass("active");
				$(".info_content").hide();
				var activeTab = $(this).find("a").attr("href");
				$(activeTab).fadeIn();
				return false;
			});
			
			
			
			
		},
		methods:{			
			checkUser: function(){
				axios.get("user/check").then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.checkLogin = true;
						this.user = rt.data.data;
						this.findRooms();
						this.findOrders();
						return;
					}
					this.checkLogin = false;
					if(!this.checkLogin){
						cocoMessage.error(1500, "请先登录！", function () {
				              location.href="/user/login.html";
				        });
					}
				});
			},
			gotoPay: function(ono, price, tno, rno){
				let uno = this.user.uno;
				if(tno == 101){
					location.href="/pay/alipay/pay/" + ono + "/" + price + "/" + 1 + "/" + rno + "/" + uno;
				}else if(tno == 102){
					location.href="/pay/alipay/pay/" + ono + "/" + price + "/" + 2 + "/" + rno + "/" + uno;
				}else if(tno == 0){//结清
					location.href="/pay/alipay/pay/" + ono + "/" + price + "/" + 3 + "/" + rno + "/" + uno;
				}
				
			},
			checkOrder: function(rno, tno, status){
				axios.post("order/check", qs.stringify({rno:rno, tno: tno, status: status})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.findRooms();
						cocoMessage.info(1500, "确认成功！", function () {
				             
				        });
						return;
					}
				})
			},
			findRooms: function(){
				axios.post("room/finds",qs.stringify({uno: this.user.uno})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.rooms = rt.data.data;
						return;
					}
				})
			},
			findOrders: function(){
				axios.post("order/finds", qs.stringify({uno:this.user.uno})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.orders=rt.data.data;
						return;
					}
				})
			},
			outOrder: function(ono, price){
				axios.post("order/outOrder", qs.stringify({ono:ono, price: price})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.findOrders();
						cocoMessage.info(1500, "已退房，请结清余款！", function () {
				             
				        });
						return;
					}
				})
			},
			closeOrder: function(ono, rno){
				axios.post("order/closeOrder", qs.stringify({ono:ono, rno: rno})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						this.findOrders();
						cocoMessage.info(1500, "取消成功！", function () {
				             
				        });
						return;
					}
				})
			},
			updateRoomStatus: function(rno, status){
				axios.post("room/updateStatus", qs.stringify({rno: rno, status: status})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200){
						cocoMessage.info(1500, "操作成功！", function () {
				             
				        });
						this.findRooms();
						return;
					}
				})
			},
			
    		out: function(){
    			axios.get("user/out" ).then (rt =>{
			    	if (rt.status == 200 && rt.data.code == 200){
			    		this.user = [];
			    		this.checkLogin = false;
			    		cocoMessage.error(1500, "请先登录！", function () {
				              location.href="/user/login.html";
				        });
			    		return false;
			    	}
			    	this.user = [];
			    	this.checkLogin = false;
			    	cocoMessage.error(1500, "请先登录！", function () {
			              location.href="/user/login.html";
			        });
		    	})
    		}
				
			
		}
	})
		
</script>
</html>
